<template>
	<view class="invoice">
		<view class="invoice-top flex-center-between">
			<view class="invoice-top-tit uni-h5">是否需要发票：</view>
			<radio-group @change="needInvoiceChange">
				<label class="radio">
					<radio value="0" :checked="needInvoice === 0" />否
				</label>
				<label class="radio">
					<radio value="1" :checked="needInvoice === 1" />是
				</label>
			</radio-group>
		</view>
		<view class="invoice-con uni-h5" v-if="needInvoice == '1'">
			<view class="invoice-con-tit">发票类型</view>
			<view class="invoice-nav flex-center">
				<!-- <view
					:class="invoiceParam.invoice_type === 1 ? 'invoice-nav-item actived' : 'invoice-nav-item' "
					@click="toggleInvoiceType(1)">
					电子发票
				</view> -->
				<view
					:class="invoiceParam.invoice_type === 2 ? 'invoice-nav-item actived' : 'invoice-nav-item' "
					@click="toggleInvoiceType(2)">
					纸质发票
				</view>
			</view>
			<view class="invoice-con">
				<view class="invoice-con-tit uni-h5">发票主体</view>
				<view class="invoice-con-type">
					<radio-group @change="toggleInvoiceObject">
						<label class="radio">
							<radio value="1" :checked="invoiceParam.invoice_object === 1" />
							个人发票
						</label>
						<label class="radio">
							<radio value="2" :checked="invoiceParam.invoice_object === 2" />
							企业发票
						</label>
					</radio-group>
				</view>
				<view class="invoice-con-tit uni-h5">发票详情</view>
				<view v-if="invoiceParam.invoice_object === 1" class="invoice-con-detail">
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">收票人</text>
						<input
							class="invoice-con-detail-item-value"
							type="text"
							:value="invoiceParam.personal_name"
							placeholder="请输入收票人"
							data-name="personal_name"
							@input="inputChange" />
					</view>
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">收票人手机</text>
						<input
							class="invoice-con-detail-item-value"
							type="number"
							:value="invoiceParam.personal_phone"
							placeholder="请输入收票人手机"
							data-name="personal_phone"
							@input="inputChange" />
					</view>
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">发票类型</text>
						<radio-group class="invoice-con-detail-item-value" @change="toggleInvoiceVATType">
							<label class="radio" v-if="invoiceParam.invoice_object === 2">
								<radio value="1" :checked="invoiceParam.vatt === 1" />
								增值税发票
							</label>
							<label class="radio">
								<radio value="2" :checked="invoiceParam.vatt === 2" />
								普通发票
							</label>
						</radio-group>
					</view>
					<view v-if="invoiceParam.invoice_type === 1" class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">收票邮箱</text>
						<input
							class="invoice-con-detail-item-value"
							type="text"
							:value="invoiceParam.personal_email"
							placeholder="请输入收票邮箱"
							data-name="personal_email"
							@input="inputChange" />
					</view>
					<view v-if="invoiceParam.invoice_type === 2">
						<text class="address-name">邮寄地址</text>
						<textarea
							class="address-area"
							:value="invoiceParam.personal_address"
							placeholder="请输入邮寄地址"
							data-name="personal_address"
							@input="inputChange" />
					</view>
				</view>
				<view v-if="invoiceParam.invoice_object === 2" class="invoice-con-detail">
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">发票抬头</text>
						<input
							class="invoice-con-detail-item-value"
							type="text"
							:value="invoiceParam.group_title"
							placeholder="请输入发票抬头"
							data-name="group_title"
							@input="inputChange" />
					</view>
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">税号</text>
						<input
							class="invoice-con-detail-item-value"
							type="text"
							:value="invoiceParam.group_tax_number"
							placeholder="请输入税号"
							data-name="group_tax_number"
							@input="inputChange" />
					</view>
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">开户银行</text>
						<input
							class="invoice-con-detail-item-value"
							type="text"
							:value="invoiceParam.group_bank"
							placeholder="请输入开户银行"
							data-name="group_bank"
							@input="inputChange" />
					</view>
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">银行账号</text>
						<input
							class="invoice-con-detail-item-value"
							type="number"
							:value="invoiceParam.group_bank_num"
							placeholder="请输入银行账号"
							data-name="group_bank_num"
							@input="inputChange" />
					</view>
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">开票联系人</text>
						<input
							class="invoice-con-detail-item-value"
							type="text"
							:value="invoiceParam.group_name"
							placeholder="请输入开票联系人"
							data-name="group_name"
							@input="inputChange" />
					</view>
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">联系电话</text>
						<input
							class="invoice-con-detail-item-value"
							type="number"
							:value="invoiceParam.group_phone"
							placeholder="请输入开票联系电话"
							data-name="group_phone"
							@input="inputChange" />
					</view>
					<view class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">发票类型</text>
						<radio-group
							class="invoice-con-detail-item-value"
							@change="toggleInvoiceVATType">
							<label class="radio">
								<radio value="1" :checked="invoiceParam.vatt === 1" />增值税发票
							</label>
							<label class="radio">
								<radio value="2" :checked="invoiceParam.vatt === 2" />普通发票
							</label>
						</radio-group>
					</view>
					<view v-if="invoiceParam.invoice_type === 1" class="invoice-con-detail-item flex-center-between">
						<text class="invoice-con-detail-item-name">收票邮箱</text>
						<input
							class="invoice-con-detail-item-value"
							type="text"
							:value="invoiceParam.group_email"
							placeholder="请输入收票邮箱"
							data-name="group_email"
							@input="inputChange" />
					</view>
					<view v-if="invoiceParam.invoice_type === 2">
						<text class="address-name">邮寄地址</text>
						<textarea
							class="address-area"
							:value="invoiceParam.group_address" 
							placeholder="请输入邮寄地址"
							data-name="group_address"
							@input="inputChange" />
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn">
			<button @click="submit">确定</button>
		</view>
	</view>
</template>

<script>
	/**
	 * 这个页面比较复杂，逻辑大致与合同页（contract）同，可以先了解合同页后再来看这个页面
	 */
	export default {
		components: {
		},
		data() {
			return {
				order_no: null,
				needInvoice: 0, //0不开发票，1开发票
				newInvoiceId: null,
				invoiceParam: {
					invoice_type: 2, //1电子、2纸质选择
					invoice_object: 1, // 1个人发票，2企业发票
					vatt: 1, // 1增值税发票，2普通发票
					personal_name: '',
					personal_phone: '',
					personal_email: '',
					personal_address: '',
					group_title: '',
					group_name: '',
					group_tax_number: '',
					group_bank: '',
					group_bank_num: '',
					group_phone: '',
					group_email: '',
					group_address: '',
				},
			}
		},
		onLoad(option) {
			this.order_no = option.order_no
			console.log('this.order_no',this.order_no)
			this.gatInvoiceData()
			this.getStorageData()
		},
		methods: {
			/**
			 * 获取发票数据
			 */
			async gatInvoiceData() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/invoice/last',
					data: {}
				})
				if (res.status === 1) {
					this.invoiceParam.invoice_type = res.data.invoice_type
					this.invoiceParam.invoice_object = res.data.invoice_object
					this.invoiceParam.personal_vatt = res.data.invoice_object === 1 ? res.data.personal.vatt : ''
					this.invoiceParam.personal_name = 
						res.data.invoice_object === 1 ? 
						(res.data.personal.contact === '0' ? '' : res.data.personal.contact) : ''
						// 若字段为空，这里后台返回的数据是‘0’，所以这里要转化成‘’。下面几个字段同理。
					this.invoiceParam.personal_phone = 
						res.data.invoice_object === 1 ? 
						(res.data.personal.phone === '0' ? '' : res.data.personal.phone) : ''
					this.invoiceParam.personal_email = 
						(res.data.invoice_object === 1 && res.data.invoice_type === 1) ? 
						(res.data.personal.email === '0' ? '' : res.data.personal.email) : ''
					this.invoiceParam.personal_address = 
						(res.data.invoice_object === 1 && res.data.invoice_type === 2) ? 
						(res.data.personal.address === '0' ? '' : res.data.personal.address) : ''
					this.invoiceParam.group_name = 
						res.data.invoice_object === 2 ? 
						(res.data.enterprise.contact === '0' ? '' : res.data.enterprise.contact) : ''
					this.invoiceParam.group_phone = 
						res.data.invoice_object === 2 ? 
						(res.data.enterprise.phone === '0' ? '' : res.data.enterprise.phone) : ''
					this.invoiceParam.group_title = 
						res.data.invoice_object === 2 ? 
						(res.data.enterprise.title === '0' ? '' : res.data.enterprise.title) : ''
					this.invoiceParam.group_bank = 
						res.data.invoice_object === 2 ? 
						(res.data.enterprise.bank === '0' ? '' : res.data.enterprise.bank) : ''
					this.invoiceParam.group_bank_num = 
						res.data.invoice_object === 2 ? 
						(res.data.enterprise.bank_num === '0' ? '' : res.data.enterprise.bank_num) : ''
					this.invoiceParam.group_tax_number = 
						res.data.invoice_object === 2 ? 
						(res.data.enterprise.tax_number === '0' ? '' : res.data.enterprise.tax_number) : ''
					this.invoiceParam.group_vatt = res.data.invoice_object === 2 ? res.data.enterprise.vatt : ''
					this.invoiceParam.group_email = 
						(res.data.invoice_object === 2 && res.data.invoice_type === 1) ? 
						(res.data.enterprise.email === '0' ? '' : res.data.enterprise.email) : ''
					this.invoiceParam.group_address = 
						(res.data.invoice_object === 2 && res.data.invoice_type === 2) ? 
						(res.data.enterprise.address === '0' ? '' : res.data.enterprise.address) : ''
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 新增or修改发票数据
			 */
			async changeInvoiceData() {
				console.log('this.order_no',this.order_no)
				let paramsPersonal = {
					order_no: this.order_no,
					invoice_type: this.invoiceParam.invoice_type,
					invoice_object: this.invoiceParam.invoice_object,
					vatt: this.invoiceParam.vatt,
					personal_name: this.invoiceParam.personal_name !== '' ? this.invoiceParam.personal_name : 0,
					personal_phone: this.invoiceParam.personal_phone !== '' ? this.invoiceParam.personal_phone : 0,
					personal_email: this.invoiceParam.invoice_type === 1 ? this.invoiceParam.personal_email : 0,
					personal_address: this.invoiceParam.invoice_type === 2 ? this.invoiceParam.personal_address : 0,
					group_title: 0,
					group_tax_number: 0,
					group_bank: 0,
					group_bank_num: 0,
					group_name: 0,
					group_phone: 0,
					group_address: 0,
					group_email: 0,
				}
				let paramsGroup = {
					order_no: this.order_no,
					invoice_type: this.invoiceParam.invoice_type,
					invoice_object: this.invoiceParam.invoice_object,
					vatt: this.invoiceParam.vatt,
					personal_name: 0,
					personal_phone: 0,
					personal_email: 0,
					personal_address: 0,
					group_title: this.invoiceParam.group_title !== '' ? this.invoiceParam.group_title : 0,
					group_tax_number: this.invoiceParam.group_tax_number !== '' ? this.invoiceParam.group_tax_number : 0,
					group_bank: this.invoiceParam.group_bank !== '' ? this.invoiceParam.group_bank : 0,
					group_bank_num: this.invoiceParam.group_bank_num !== '' ? this.invoiceParam.group_bank_num : 0,
					group_name: this.invoiceParam.group_name !== '' ? this.invoiceParam.group_name : 0,
					group_phone: this.invoiceParam.group_phone !== '' ? this.invoiceParam.group_phone : 0,
					group_email: this.invoiceParam.invoice_type === 1 ? this.invoiceParam.group_email : 0,
					group_address: this.invoiceParam.invoice_type === 2 ? this.invoiceParam.group_address : 0,
				}
				let res = await this.$http.request({
					method: 'post',
					url: '/api/invoice/add',
					data: this.invoiceParam.invoice_object === 1 ? paramsPersonal : paramsGroup
				})
				if (res.status === 1) {
					this.newInvoiceId = res.data
					this.setStorage()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 缓存数据
			 */
			setStorage(){
				uni.setStorageSync('INVOICE', {
					invoiceId: this.needInvoice ? this.newInvoiceId : 0,
					invoiceTpye: !this.needInvoice ? '否' : this.invoiceParam.invoice_type === 1 ? '电子' : '纸质',
					invoiceObject: !this.needInvoice ? '' : this.invoiceParam.invoice_object === 1 ? '个人' : '企业'
				});
				uni.navigateBack()
			},
			/**
			 * 提交发票表单
			 */
			submit() {
				if (this.needInvoice) {
					this.changeInvoiceData()
				} else {
					this.setStorage()
				}
			},
			/**
			 * 获取缓存发票数据
			 */
			getStorageData() {
				try {
					const value = uni.getStorageSync('INVOICE')
					if (value.invoiceId && value.invoiceId !== 0) {
						this.needInvoice = 1
					}
				} catch (e) {
					// error
				}
			},
			/**
			 * 监听表单输入框变化
			 * @param {Object} e
			 */
			inputChange(e) {
				this.invoiceParam[e.target.dataset.name] = e.detail.value
			},
			/**
			 * 开or不开发票
			 * @param {Object} e
			 */
			needInvoiceChange(e) {
				this.needInvoice = Number(e.target.value)
			},
			/**
			 * 切换发票类型-电子1 or 纸质2
			 * @param {Number} status
			 */
			toggleInvoiceType(status) {
				this.invoiceParam.invoice_type = status
			},
			/**
			 * 切换发票类型-个人or企业
			 * @param {Object} e
			 */
			toggleInvoiceObject(e) {
				this.invoiceParam.invoice_object = Number(e.target.value)
			},
			/**
			 * 切换发票类型-增值税or普通
			 * @param {Object} e
			 */
			toggleInvoiceVATType(e) {
				this.invoiceParam.personal_vatt = Number(e.target.value)
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
		}
	}
</script>

<style lang="scss">
	.invoice{
		height: 100%;
		&-top{
			height: 120rpx;
			padding: 0 40rpx;
			margin-top: 20rpx;
			background: $uni-bg-color;
			.radio{
				margin-left: 48rpx;
			}
		}
		.invoice-nav{
			// margin-top: 20rpx;
			height: 174rpx;
			padding-left: 40rpx;
			background: $uni-bg-color;
			.invoice-nav-item{
				width: 200rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: $uni-border-radius-base;
				font-size: $uni-font-size-sm2;
				border: 1rpx solid $uni-border-color;
				margin-right: 30rpx;
			}
			.actived{
				color: $uni-text-color-inverse;
				background: $uni-color-theme;
				border: 1rpx solid $uni-color-theme;
			}
		}
		.invoice-con{
			margin-top: 20rpx;
			background: $uni-bg-color;
			&-tit{
				line-height: 90rpx;
				padding-left: 40rpx;
			}
			&-type{
				padding: 0 40rpx;
				margin: 30rpx 0;
				.radio{
					margin-right: 100rpx;
				}
			}
			&-detail{
				padding: 0 40rpx;
				border-top: 1rpx solid $uni-border-color;
				&-item{
					height: 110rpx;
					border-bottom: 1rpx solid $uni-border-color;
					&:last-child{
						border-bottom: none;
					}
					&-name{
						color: $uni-text-color-grey2;
						width: 300rpx;
					}
					&-value{
						width: 100%;
						text-align: right;
						.radio{
							margin-left: 20rpx;
						}
					}
				}
				.address-name{
					color: $uni-text-color-grey2;
					line-height: 60rpx;
				}
				.address-area{
					width: 650rpx;
					height: 100rpx;
					margin: 20rpx auto;
					font-size: 30rpx;
				}
			}
			
		}
		.submit-btn{
			padding: 0 30rpx;
		}
	}
</style>
